<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="popup.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="jquery.js">
        </script>
        <script type="text/javascript" src="splitter.js">
        </script>
        <script type="text/javascript" src="popup.js">
        </script>
        <script type="text/javascript" src="jquery.contextmenu.r2.packed.js">
        </script>
    </head>
    <body onload="notes.FillList();" onUnload="notes.SaveState();">
        <div id="Menu">
        	<div id="column-left"><a href="javascript:void(0);" class="btn" onclick="notes.AddEmptyNote();" id="add_note"><span class="add_button"></span></a></div>
            <div id="column-right"><a href="javascript:void(0);" class="btn" onclick="bgPage.Sync(notes);" id="sync"><span class="sync_button"></span></a></div>
            <div id="column-centry"><input type="text" placeholder="" spellcheck="false" name="search" id="quick_search"></div>
        </div>
        <div id="LinkedNotes">
            <div id="NotesList" onselectstart="return false;">
            </div>
            <div id="NoteText">
                <textarea class="note" cols="43" rows="50" onBlur="notes.UpdateNote(this);" onChange="notes.UpdateNote(this);">
                </textarea>
            </div>
        </div>
        <div class="contextMenu" id="myMenu1">
            <ul>
                <li id="copy">
                    <img alt="" src="images/document-copy.png" /><span>Copy</span>
                </li>
				<li id="font">
                    <img alt="" src="images/magnifier.png" /><span><font style="font-variant: small-caps;">a</font>&rarr;A</span>
                </li>
            </ul>
        </div>
		<div class="message">
		</div>
        <script type="text/javascript">
            $().ready(function(){
                $("#LinkedNotes").splitter({
                    type: "h",
                    sizeTop: true,
                    localStorage: "list_height",
                    accessKey: "P"
                });
                notes.BindSearcher("input#quick_search");
                $.contextMenu.defaults({
                    menuStyle: {
                        fontFamily: "Arial, Helvetica, sans-serif",
                        width: "auto"
                    },
                    itemHoverStyle: {
                        fontFamily: "Arial, Helvetica, sans-serif",
                        border: "1px solid #3366cc",
                        backgroundColor: "rgba(182, 212, 252, 0.496094)",
                    }
                });
                $('#NoteText').contextMenu('myMenu1', {
                    bindings: {
                        'copy': function(t){
							copy();
                        },
						'font': function(t){
                            notes.SwitchFontsize();
                        }
                    }
                });
                $('textarea.note').select(positionSave);
                $("a#add_note").attr("title", chrome.i18n.getMessage("add_note"));
				$("input#quick_search").attr("placeholder", chrome.i18n.getMessage("quick_search"));
                $("a#remove_note").attr("title", chrome.i18n.getMessage("remove_note"));
                $("a#sync").attr("title", chrome.i18n.getMessage("sync"));
                $("a#add_note span").append(chrome.i18n.getMessage("add_button"));
                $("a#remove_note span").append(chrome.i18n.getMessage("remove_note"));
                $("a#sync span").append(chrome.i18n.getMessage("sync_button"));
                $('li.copy span').text(chrome.i18n.getMessage("menu_copy"));
				$("#column-centry").width($("#Menu").width() - $("#column-left").width() - $("#column-right").width() - 4);
            });
        </script>
    </body>
</html>
